<style type="text/css">
    .tk-map {
        text-align: center;
        display: block;
        width: 100%;
        height: 289px;
        /* background-image: url("<?php echo res_url("img/indonesia map 800px.png"); ?>"); */
        background-size: 100%;
        clear: both;
        margin-top: 8px;
    }
</style>
<div style="margin-bottom: 0.3em;">
    <h1 class="title"><?php echo $pageTitle; ?></h1>
</div>
<div>
    <div style="margin-top: 1.8em; margin-bottom: -0.2em;">
        Tahun :
    </div>
    <div>
        <select id="year" onChange="javascript:updateData();">
            <option selected="true">2014</option>
            <option>2013</option>
            <option>2012</option>
            <option>2011</option>
        </select>
    </div>
</div>
<div style="margin-top: 2.6em; margin-bottom: 1.3em;">
    <h1 id="map-judul" class="title"></h1>
</div>
<div class="tk-map" style="margin-bottom: 2em;"><div id="map"></div></div>
<div class="hidden">
    <h1>Judul Tabel</h1>
</div>
<div class="hidden">
    <table>
        <thead>
            <tr>
                <th rowspan="2">Regional</th>
                <th rowspan="2">Provinsi</th>
                <th rowspan="2">Kabupaten</th>
                <th colspan="3">Jenis Bantuan</th>
            </tr>
            <tr>
                <th>Bantuan 1</th>
                <th>Bantuan 2</th>
                <th>Bantuan 3</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
</div>
<div id="popupContainer" class="hidden">
    <h2 style="margin: 0px; margin-bottom: 5px;">Title</h2>
    <div class="content" style="padding: 0px;">content</div>
</div>
<script type="text/javascript">
            var map, selectedFeature, selectControl, overlay;
            jQuery(document).ready(function() {
                map = createMapExplorer("map");
                // The overlay layer for our marker, with a simple diamond as symbol
                overlay = new OpenLayers.Layer.Vector('Overlay', {
                    styleMap: new OpenLayers.StyleMap({
                        externalGraphic: '<?php echo res_url("img/markerbanps.png"); ?>',
                        graphicWidth: 20, graphicHeight: 24, graphicYOffset: -24,
                        title: '${tooltip}'
                    })
                });

                // control
                selectControl = new OpenLayers.Control.SelectFeature(overlay, {
                    onSelect: onFeatureSelect,
                    onUnselect: onFeatureUnselect,
                    autoActivate: true
                });
                map.addLayers([overlay]);
                map.addControl(selectControl);

                updateData();
            });

            function updateData() {
                $.ajax({
                    type: "POST",
                    url: "<?php echo site_url("service/getDataJSON/kegbyyear"); ?>",
                    data: {
                        year: $("#year").val()
                    },
                    dataType: "json",
                    beforeSend: function(xhr) {
                        overlay.removeAllFeatures();
                    },
                    success: function(data) {
                        for (var i = 0; i < data.length; i++) {
                            var keg = data[i];
                            if (keg.loc_obj !== null) {
                                var long, lat;
                                switch (keg.loc_type) {
                                    case "PROV" :
                                        var features = wktToFeatures(keg.loc_obj.vector);
                                        for (var j = 0; j < features.length; j++) {
                                            var feature = features[j];
                                            var point = feature.geometry.getCentroid().transform(map.projection, map.displayProjection);
                                            long = point.x;
                                            lat = point.y;
                                        }
                                        break;
                                    case "KAB" :
                                    case "KEC" :
                                    case "DESA" :
                                        long = keg.loc_obj.longlatitude;
                                        lat = keg.loc_obj.latitude;
                                        break;
                                }
                                var longLat = new OpenLayers.Geometry.Point(long, lat)
                                        .transform(map.displayProjection, map.projection);
                                overlay.addFeatures([
                                    new OpenLayers.Feature.Vector(longLat, {tooltip: keg.content_id.title, data: keg})
                                ]);
                            }
                        }
                        map.setCenter(new OpenLayers.LonLat(120, -2.5).transform(
                                map.displayProjection,
                                map.projection), 4);
                    },
                    error: function(xhr, status, error) {
                    }
                });

            }

            function onFeatureSelect(feature) {
                /*
                 selectedFeature = feature;
                 var kabupaten = feature.attributes.data;
                 $("#popupContainer h2").text(kabupaten.display_name);
                 $("#popupContainer .content").html(kabupaten.generated_summary);
                 $("#popupContainer .link a").prop("href", "<?php echo site_url("profildt/detail/kab"); ?>/" + kabupaten.code);
                 popup = new OpenLayers.Popup.FramedCloud("chicken",
                 feature.geometry.getBounds().getCenterLonLat(), null,
                 $("#popupContainer").html(),
                 null, true, onPopupClose);
                 popup.panMapIfOutOfView = false;
                 feature.popup = popup;
                 map.addPopup(popup);
                 */
            }
            function onFeatureUnselect(feature) {
                /*
                 map.removePopup(feature.popup);
                 feature.popup.destroy();
                 feature.popup = null;
                 */
            }
</script>